import React from 'react';
import ImageLazy from '../components/commons/ImageLazy';

const arr_right = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/arr_right.png');
const user_nav1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav1.png');
const user_nav2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav2.png');
const user_nav3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav3.png');
const user_nav4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/user_nav4.png');

export default React.createClass({
  render:function(){
    return(
      <div id="user">
        <header className="border_b1 border_t1">
          <span className="circle">
            <em style={{backgroundImage:"url(https://dummyimage.com/200x200/b293a4/fff)"}}></em>
          </span>
          <div className="userName">月半弯</div>
        </header>
        <div className="content">
          <div classNmae="item_wrapper">
            <div classNmae="item">
              <a href="javascript:void(0)" className="tit box border_b1">
                <h3>我的订单</h3>
                <small>查看全部订单<img src={arr_right} className="arr_right" /></small>
              </a>
              <div className="nav box border_b1">
                <div className="wrapper">
                  <a href="javascript:void(0)">
                    <ImageLazy src={user_nav1} style={{width:'.56rem'}} /><br/>
                    待付款
                  </a>
                  <a href="javascript:void(0)">
                    <ImageLazy src={user_nav2} style={{width:'.5rem'}} /><br/>
                    未消费
                  </a>
                  <a href="javascript:void(0)">
                    <ImageLazy src={user_nav3} style={{width:'.54rem'}} /><br/>
                    已消费
                  </a>
                  <a href="javascript:void(0)">
                    <ImageLazy src={user_nav4} style={{width:'.56rem'}} /><br/>
                    退款
                  </a>
                </div>
              </div>
            </div>
            <div classNmae="item">
              <a href="javascript:void(0)" className="tit box border_b1">
                <h3>我的购物车</h3>
                <small><img src={arr_right} className="arr_right" /></small>
              </a>
            </div>
            <div classNmae="item">
              <a href="javascript:void(0)" className="tit box border_b1">
                <h3>常见问题</h3>
                <small><img src={arr_right} className="arr_right" /></small>
              </a>
            </div>
            <div classNmae="item">
              <a href="javascript:void(0)" className="tit box border_b1">
                <h3>设置</h3>
                <small><img src={arr_right} className="arr_right" /></small>
              </a>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
